<!doctype html>
<html>

<head>
<meta charset="utf-8">
<link media="all" href="css/home.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/common.js"></script>
<script type="text/javascript" src="js/swipe.js"></script>

<title>登山手机页面</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta content="" name="Keywords">
<meta content="" name="Description">
<!-- Mobile Devices Support @begin -->
<meta http-equiv="Content-Type" content="application/xhtml+xml;charset=UTF-8">
<meta http-equiv="Cache-Control" content="no-cache,must-revalidate">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="expires" content="0">
<meta name="format-detection" content="telephone=no, address=no">
<meta content="yes" name="apple-mobile-web-app-capable"> <!-- apple devices fullscreen -->
<meta content="black-translucent" name="apple-mobile-web-app-status-bar-style">
<!-- Mobile Devices Support @end -->
<link href="favourite.ico" rel="shortcut icon">
<link rel="apple-touch-icon" href="icon.png" />
<link rel="apple-touch-icon" href="touch-icon-iphone.png" />
<!--iPad 1 72x72 像素-->
<link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" />
<!--iPhone 4 114x114 像素-->
<link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone4.png" />
</head>
<body>
<div id="main">
	<header>
		<a  class='return'></a>
		
		首页
		
    </header>

	
	<!-- 主体内容 begin-->
	
    <div class="slide">
        <div class="box_swipe" id="banner_box">
            <ul>
            	<li><a><img src="images/banner.png"></a></li>
                <li><a><img src="images/banner.png"></a></li>
                <li><a><img src="images/banner.png"></a></li>
        	</ul>
            <ol>
                <li class="on"></li>
                <li></li>
                <li></li>
            </ol>
        </div>
    </div>
	
    <div class="cell_full">
    	<div class="panel">
			<div class="math_cell">
			   <div class='math_cell_icon'></div>
			   <lable class='gray'>赛事中心</lable>
			</div>

			<div class="math_cell">
			   <div class='math_cell_icon'></div>
			   <lable class='gray'>赛事热点</lable>
			</div>

			<div class="math_cell">
			   <div class='math_cell_icon'></div>
			   <lable class='gray'>参赛团队</lable>
			</div>

			<div class="math_cell">
			   <div class='math_cell_icon'></div>
			   <lable class='gray'>我的联赛</lable>
			</div>
   
        </div>
    </div>
	
	<div class="cell"> 
		<aside>
			<lable class="huge red">赛事中心</lable>
			<div class="img_wrap">
			<img src="images/banner.png" > <!-- 图片要求，最好是长高2：1的比例 -->
			<div class="bg">2015第三段徒步超级赛     <span class="state red">已结束</span></div>
			  <div class="img_wrap_addrass">
				 <a class='rotate' >浙江-宁波</a> <!-- 这里只能放四个字，会不会太短 -->
			  </div>
			</div>      

			<div class="img_wrap">
			<img src="images/banner.png" > <!-- 图片要求，最好是长高2：1的比例 -->
			<div class="bg">2015第三段徒步超级赛     <span class="state white">资格赛</span></div>
			  <div class="img_wrap_addrass">
				 <a class='rotate' >浙江-宁波</a> <!-- 这里只能放四个字，会不会太短 -->
			  </div>
			</div>   
			
			<div class="img_wrap">
			<img src="images/banner.png" > <!-- 图片要求，最好是长高2：1的比例 -->
			<div class="bg">2015第三段徒步超级赛     <span class="state white">资格赛</span></div>
			  <div class="img_wrap_addrass">
				 <a class='rotate' >&nbsp;&nbsp;&nbsp;北&nbsp;京</a> <!-- 这里只能放四个字，会不会太短 -->
			  </div>
			</div>  
		</aside> 		
	</div>
	<!-- 主体内容 end-->	
	
	<!-- 尾部 begin-->	
	<footer>
	  <p>© 2014超级联赛</p>
	</footer>
	<!-- 尾部 end-->	
</div>
<script type='text/javascript'>
$(function(){  
			new Swipe(document.getElementById('banner_box'), {
				speed:500,
				auto:3000,
				callback: function(){
					var lis = $(this.element).next("ol").children();
					lis.removeClass("on").eq(this.index).addClass("on");
				}
			});
})


</script>
</body>
</html>